<template>
    <div class="cloud-resource">
        <!-- content -->
        <div class="container" >
            <!-- left -->
            <div class="left-category" v-if="eduLevelVer ==='primary'">
                <div class="s-20" style="margin:20px 0 24px 30px;font-weight: bold;color: #303133;">
                    <div style="display: flex;align-items: center;">
                        <div @click="back" style="width: 30px;height: 36px;position: relative;cursor: pointer;">
                            <img style="position: absolute;top: 9px;"  src="../../assets/img/cloud/toBack.png" alt="">
                        </div>
                        <div>
                            资源中心
                        </div>
                    </div>
                </div>
                <div class="s-16" style="margin-bottom: 20px;margin-left: 30px;color: #606266;font-weight: bold;">
                    系统资源
                </div>
                <div class="item" @click="getResource(-1)" :class="{'current':idx === -1}">
                    <img style="width: 18px;height: 18px;" v-if="idx === -1" src="../../assets/img/cloud/全部资源_1.png" />
                    <img style="width: 18px;height: 18px;" v-else src="../../assets/img/cloud/全部资源.png" />
                    <span>全部资源</span>
                </div>
                <div :class="{'current':idx === index}" @click="getResource(index, item)" class="item"
                    v-for="(item,index) in categoryList" :key="item.id">
                    <img style="width: 20px;height: 20px;" v-if="idx === index" :src="item.active_img" />
                    <img style="width: 20px;height: 20px;" v-else :src="item.img" />
                    <span>{{item.name}}</span>
                </div>
                <div class="s-16" style="margin: 20px 0 20px 30px ; color: #606266;font-weight: bold;">
                    个人资源
                </div>
                <div class="item" @click="isSystemResource = false , showSelfResource() , idx = -2"  :class="{'current':idx === -2}">
                    <img style="width: 18px;height: 18px;" v-if="idx === -2" src="../../assets/img/cloud/全部资源_1.png" />
                    <img style="width: 18px;height: 18px;" v-else src="../../assets/img/cloud/全部资源.png" />
                    <span>个人多媒体资源</span>
                </div>
            </div>
            <!-- right -->
            <div :class="{'ms-container':eduLevelVer !=='primary'}" class="right-category" >
                <div v-if="isSystemResource" >
                    <!-- 搜索栏 -->
                    <div class="cloud-handle" style="-webkit-app-region: no-drag;">
                        <div class="s-20  currentType">{{currentType}}</div>
                        <div style="position: relative;left: -30px;">
                            <el-input v-arouse :disabled="!searchable"  :class="[showSimilar ? 'clearBrs':'' ]" clearable
                                class="input" placeholder="请输入资源名称/关键词" prefix-icon="el-icon-search" v-model="searchText" @input="searchChange" @blur="disShowSimilar"
                                @keydown.native.enter="search"></el-input>
                                <div class="similar" v-if="showSimilar & similarList.length > 0">
                                    <div v-for="(item , index) in similarList" :key="index" class="singleWord" @click="searchSimilar(item)">
                                        <div>{{ item }}</div>
                                    </div>
                                </div>
                            <button class="search_btn" @click="search">搜索</button>
                            <div></div>
                        </div>
                        <div @click="back"  class="back">
                            <img  src="../../assets/img/person/back.png" alt="">
                            <span class="s-15  pointer">返回</span>
                        </div>
                    </div>
                    <!-- 关键词 -->
                    <div class="keywordTags">
                        <div style="display: flex;align-items: center; position: relative;">
                            <span class="s-14" style="color: #606266;">热门主题 :</span>
                            <div style="display: flex;;margin-left: 30px;">
                                <div v-for="(item , index) in keywordTagsData" :key="index" >
                                    <span class="s-14 pointer tagText"  @click="searchkeyWordTag(item.keyWordTag)">{{item.keyWordTag}}</span>
                                    <span v-if="index !== keywordTagsData.length-1" class="separator"></span>
                                </div>
                            </div>
                            <div class="pointer s-14 AI_btn"  v-if="!isDiyLesson" @click="getResource('AI')">
                                <img src="../../assets/img/cloud/AI_Icon.png" alt="">
                                智能推荐</div>
                        </div>
                    </div>
                    <div :class="[isAIRecommend && limit ? 'notVip' : '']" class="right-content">
                        <div v-if="isAIRecommend && !limit" :class="[isAIRecommend ? 'animation_bg' : '']"  id="animation_box"  class="animation_box">
                            <video class="video" style="border:none;" src="../../assets/img/cloud/recommend_loading.mp4" autoplay muted></video>
                            <div class="text">智能匹配资源中...</div>
                        </div>
                        
                        <span :class="[isAIRecommend ? 'animation_res' : '']" class="title" v-if="isAIRecommend ||clickSearch">{{resourceLable}}</span><span class="mark">{{vipMessage()}}</span>
                        <div :class="[isAIRecommend ? 'animation_res' : '']"  :id="[isAIRecommend ? 'animation_res' : '']" ref="scroll" class="scroll-container" infinite-scroll-disabled="loading"
                            v-infinite-scroll="loadMore" v-if="resourceList.length" infinite-scroll-distance="2">
                            <ul class="infinite-list"  :style="clickSearch ? '' : 'margin-top: 10px;' ">
                                <li v-for="(item,index) in resourceList" class="item" :key="item+index">
                                    <img :src="item.thumb" />
                                    <div class="content">
                                        <div style="display: flex;align-items: center;">
                                            <div class="name">{{item.show_name}}</div>
                                            <span class="separator"></span>
                                            <div class="category">{{item.meta_type | resType}}</div>
                                        </div>
                                        <div v-if="item.isDownload"  class="s-14" style="color: #909399">
                                            <span class="pointer">已插入</span>
                                        </div>
                                        <div v-else class="s-14 " style="color: #0091FF;" @click="download(item, index)">
                                            <span class="pointer">插入</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                        <div v-else class="empty">
                            <img :class="[isAIRecommend ? 'animation_empty' : '']" src="../../assets/img/cloud/empty.png" />
                            <!-- <div v-if="!isAIRecommend" class="nores_tips" >暂无资源</div> -->
                            <div v-if="isAIRecommend" :class="[isAIRecommend ? 'animation_empty' : '']" class="nores_tips" >该课程暂无推荐资源</div>
                        </div>
                    </div>
                    <div class="nolimit" v-if="limit && isAIRecommend">
                        <img  src="../../assets/img/cloud/nolimit.png" alt="无权限">
                        <div class="nolimit_tips">暂无权限，请升级至VIP/SVIP会员使用</div>
                    </div>
                </div>
                <div class="selfReource" v-else style="-webkit-app-region: no-drag;">
                    <div style="display:flex ;justify-content:space-between ;">
                        <div class="s-20" style="font-weight: bold;">个人多媒体资源</div>
                        <div class="back" @click="back">
                            <img  src="../../assets/img/person/back.png" alt="">
                            <span class="s-15  pointer">返回</span>
                        </div>
                    </div>
                    <div class="spaceSize">
                        <div style="display:flex ; align-items: center;justify-content: space-between;">
                            <el-progress  style="width: 50vw" :percentage="spacePercent" :stroke-width="20" :show-text="false"></el-progress>
                            <div style="margin:0 20px 0 30px">
                                <span >已使用 :</span>
                                <span style="color: #0085FF;">{{totalSize > 512 ? ((usedSize/1024).toFixed(3) + 'G') : (usedSize+'M')}}</span>
                                <span>/ {{totalSize > 512 ? ((totalSize/1024).toFixed(1) + 'G') : (totalSize+'M')}}</span>
                                <span style="font-weight: bold;color: #F7B500;">{{' ('+spacePercent +'%)'}}</span>
                            </div>
                        </div>
                        <div class="spaceManage">
                            <img src="../../assets/img/cloud/spaceManage.png" alt="">
                            <span class="s-14 pointer" @click="$router.push({name:'space'})">空间管理</span>
                        </div>
                    </div>
                    <div class="spaceFile">
                        <el-table :data="uploadFileData" style="width: 100%;"  :header-cell-style="headerStyle">
                            <el-table-column label="文件名" width="500">
                                <template slot-scope="scope" >
                                    <div style="white-space: nowrap;display: flex;align-items: center;">
                                        <img v-if="scope.row.fileType == '2' " style="width: 23px;height: 26px;" src="../../assets/img/cloud/pdf.png" alt="">
                                        <img v-if="scope.row.fileType == '3'"  style="width: 23px;height: 26px;"  src="../../assets/img/cloud/word.png" alt="">
                                        <img v-if="scope.row.fileType == '4'"  style="width: 24px;height: 24px;"  src="../../assets/img/cloud/img.png" alt="">
                                        <img v-if="scope.row.fileType == '5'"  style="width: 26px;height: 23px;"  src="../../assets/img/cloud/video.png" alt="">
                                        <img v-if="scope.row.fileType == '6'"  style="width: 24px;height: 24px;"  src="../../assets/img/cloud/audio.png" alt="">
                                        <span  class="s-14 line-over-ellipsis" style="margin-left: 8px;color: #303133;">{{scope.row.displayName}}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="关联课程" >
                                <template slot-scope="scope">
                                    <div style="display: flex;white-space: nowrap;width: 300px;">
                                        <div v-for="(item , index) in scope.row.relation" :key="index">
                                            <span v-if="index < 3">{{'《'+ item.lessonName +'》'}}</span>
                                        </div>
                                        <span  v-if="scope.row.relation.length >= 3">...</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="类型" width="100">
                                <template slot-scope="scope">
                                    <div>
                                        <span style="font-weight: 400; font-size: 14px">{{scope.row.typeName }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="100">
                                <template slot-scope="scope">
                                    <div style="color:#4893ff" class="pointer s-14" @click="insertFile(scope.row)" :class="[scope.row.isInsert ? 'inSert' : '']">{{scope.row.isInsert ? '已插入' : '插入'}}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <div style="margin-right: 30px;">
                                共
                                <span style="font-weight: bold;">{{ selfResTotal }}</span>
                                个文件
                            </div>
                            <el-pagination
                                background
                                layout="prev, pager, next "
                                :page-size="selfResourceSize"
                                :total="selfResTotal"
                                @current-change="handleselfResChange"
                                >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>


<script>
import lesson from '@/content/api/lesson'
import resource from '@/content/api/resource'
import usermeta from '@/content/api/usermeta'
import store from '../../../content/store/index.js'
import user from '@/content/api/user'
import { SqlLib } from "../../../../../static/lib/sqlite/SqlLib";
import { SqlLibUser } from "../../../../../static/lib/sqlite/service/SqlLibUser";
import { SqlLibBook } from "../../../../../static/lib/sqlite/service/SqlLibBook";
import { UserResource } from "../../../../../static/lib/sqlite/model/UserResource";
import { Lesson } from '../../../../../static/lib/sqlite/model/Lesson'
import { CloudResDownloader } from "../../../../../static/lib/downloader/CloudResDownloader";
import { StringUtil } from "../../../../../static/utils/StringUtil";
import { User } from "../../../../../static/lib/sqlite/model/User";
import { UUIDUtil } from "../../../../../static/utils/UUIDUtil";
import bus from "../../assets/js/bus.js";
const cryUtil = require('../../../../../static/utils/CrypUtil')
import { DownloadCenter } from '../../../../../static/lib/downloader/DownloadCenter'
import { FileDownloader } from '../../../../../static/lib/downloader/FileDownloader'



export default {
    name: "index",
    data () {
        return {
            idx: -1,
            dIdx: -1,
            eduSubjectId: '',
            searchText: '',
            eduLevel: '',
            categoryList: [],
            resourceList: [],
            total: 0,
            pageNum: 1,
            loading: false,
            userName: '',
            downloadedRes: [],
            lessonId: "",
            userId: "",
            searchable: true,
            metaId: "",
            cloudDownloader: null,
            tips: false,
            eduLevelVer: window.eduLevel,
            isVip:false,
            isAIRecommend:false,
            AI_animation:false,
            limit:false,
            clickFast:false,
            clickSearch:false,
            keywordTagsData:[],
            resourceLable:'',
            isSystemResource:true,
            selfResourceNum:1,
            selfResourceSize:10,
            selfResTotal:0,
            spacePercent:0,
            usedSize:0,
            totalSize:0,
            uploadFileData:[],
            isDiyLesson:false,
            isTagResource:false,
            currentType:'全部资源',
            similarList:[],
            showSimilar:true,
        }
    },
    watch:{
        isSystemResource(val){
            console.log('val',val);
        }
    },
    mounted () {
        let _this = this;
        _this.getSqlLib();
        _this._getAllSubjectIds()
        _this.queryKeyWordTags()
        const params = {
            eduLevelId: _this.eduLevel,
            pageNum: 1,
            pageSize: 12
        }
        
        _this.lessonId = _this.$route.params.lessonId;
        if (localStorage.jump === "0") {
            console.log(_this.categoryList);
            this.getResource('AI')
        }else{
            _this._getAllResource(params);
        }
    
        this.totalSize = Number(localStorage.getItem('spaceSize'))
        this.usedSize =  Number(localStorage.getItem('spaceusedSize'))
        if (this.usedSize >= this.totalSize) {
            console.log('个人空间满了');
            this.usedSize = this.totalSize
           
        }
        this.spacePercent = Number(((this.usedSize/this.totalSize)*100).toFixed(this.totalSize > 512 ? 2 : 1)) 
        let sqlLib = SqlLib.getInstance(window.$DBDIR)
        let user = SqlLibUser.queryCurrentUser(sqlLib)
        if (user.bookId == user.id) {
            console.log('我的课程');
            this.isDiyLesson = true
        }else{
            this.isDiyLesson = false
            console.log('系统课程');
        }
    },
    destroyed () {
        this.metaId = "";
    },
    filters: {
        resType (val) {
            let type = {
                ZoomIn: "显微缩放",
                HeatMap: "热成像",
                VirtualReality: "VR全景",
                PolyvVideo: "视频",
                Rotation360: "360旋转",
                Partial: "图片热区",
                InnerStruct: "图片集",
                TimeLapse: "延时摄影",
                MultiAngle: "多角度",
                Quiz: "互动问答",
                Collection: "分类与匹配",
                VirtualLab:"虚拟实验",
                BosVideo:"视频",
                VrHotspot:'VR漫游',
                StepExplore:'分布探究',
            }
            return type[val]
        }
    },

    methods: {
        searchSimilar(item){
            if (item) {
                console.log('item',item);
                this.searchText = item 
                this.search()
            }else{
                setTimeout(() => {
                    this.showSimilar = false
                }, 300);
            }
           
        },
        disShowSimilar(){
            this.searchSimilar()
        },
        searchChange(val){
            // console.log(val);
            resource.getSimilarWord({
                searchWord:this.searchText
            }).then(res=>{
                if (res.code == '0') {
                    this.showSimilar = true
                    this.similarList = res.returnValue
                    console.log('SimilarWord',res,this.similarList);
                }else{
                    this.showSimilar = false
                    this.similarList = []
                }
            })
        },
        //插入个人资源
        insertFile(row){
            console.log(row);
            let _this = this
            if (row.isInsert) {
                return
            }
            let sameNameCount = 0
            this.uploadFileData.forEach((item,index) =>{
                if (row.displayName == item.displayName) {
                    sameNameCount++
                }
            })
            console.log(sameNameCount + '同名文件');
            
            // return
            usermeta.createUserFile({//创建用户、课程、资源关系
                displayName:row.displayName,
                fileKey:row.fileKey,
                fileMd5:row.fileMd5,
                fileSize:row.fileSize,
                fileType:row.fileType,
                lessonId: _this.lessonId,
                fileId:row.fileId,
                type: this.isDiyLesson ? 1 : 0,
            }).then(res => { 
                console.log(res);
                // return
                if (res.code == '0') {
                    let fileType = ''
                    let suffixName = row.displayName.substring(row.displayName.lastIndexOf('.'))
                    var resType = ''
                    switch (row.fileType) {
                        //关闭插入PPT
                        // case '1':
                        //     fileType = 'selfPpt'
                        //     resType = 'ppt'
                        //     break;
                        case '2':
                            fileType = 'selfPdf'
                            resType = '文档'
                            break;
                        case '3':
                            fileType = 'selfWord'
                            resType = '文档'
                            break;
                        case '4':
                            fileType = 'selfImg'
                            resType = '图片'
                            break;
                        case '5':
                            fileType = 'selfVideo'
                            resType = '视频'
                            break;
                        case '6':
                            fileType = 'selfAudio'  
                            resType = '音频'
                            break;
                        default:
                            break;
                    }
                    for (let index = sameNameCount; index >= 1; index--) {
                        if (index == 1) {
                            var searchName = _this.lessonId + '-' + row.displayName
                        } else {
                            var searchName = _this.lessonId + '-' + row.displayName.substring(0 ,row.displayName.lastIndexOf('.'))  + '('+ index +')' + suffixName
                        }
                        let searchResource = SqlLibBook.queryOneResourceByName(SqlLib.getInstance(window.$DBDIR), _this.userId, _this.lessonId,searchName)
                        if (searchResource) {
                            let tIndex = index +1
                            var preName = row.displayName.substring(0 ,row.displayName.lastIndexOf('.')) + '('+ tIndex +')' + suffixName
                            var resourceName = _this.lessonId + '-' + preName
                            break
                        }
                        if (!searchResource && index == 1) {
                            var resourceName = _this.lessonId + '-' + row.displayName
                        }
                    }
                    console.log(resourceName);
                    let userResource = new UserResource()
                    let resourceId = UUIDUtil.uuid()
                    let obj = {
                        id: resourceId,
                        userId: _this.userId,
                        lessonId: _this.lessonId,
                        resourceClassify: '0',
                        resourceType: fileType,
                        resourceId: resourceId,
                        resourceName:resourceName,
                        downloadStatus: '2',
                        resourceDescription: JSON.stringify({
                            id: resourceId,
                            name:preName ? preName : row.displayName,
                            resType: resType,
                            thumb: '',
                            downloadInfo: {
                                FileName: resourceName,
                                FileType: fileType,
                                TaskId: resourceId,
                                Url:res.returnValue.url,
                            },
                            fileMd5: row.fileMd5
                        }),
                        reverse1 : res.returnValue.id,  //用于单个删除资源关系的Id
                        reverse2 : res.returnValue.fileId, //上传过后云端的唯一资源Id
                        reverse3 : '0',
                        isDefault: '0',
                    }
                    console.log('new  userResource',userResource);
                    userResource = Object.assign(userResource, obj)
                    SqlLibBook.updateOrInsertExtraResource(SqlLib.getInstance(window.$DBDIR), userResource)
                    this.$message.success('插入成功')
                    this.showSelfResource()
                    console.log('res',res);
                }
            })
        },
        // 下载资源
        download (item, index) {
            if (this.cloudDownloader) {
                this.cloudDownloader.pauseDownload();
                this.cloudDownloader = null;
            }
            let _this = this;
            if (_this.$CONST.global.resourceSwitch[item.res_type] == undefined) {
                this.$message.error('请下载最新版本使用该资源')
                return
            }
            console.log(item);
            let itemBsr = {
                metaId: item.meta_id,
                metaType: DownloadCenter.getInstance().resTypeToEnName(item.res_type)
            }
            resource.getResourceInfoByResIds({
                metaParamDTOS: itemBsr
            }).then(res=>{
                console.log(res ,'-----------------');
                let bsrResources = res.returnValue.resources[itemBsr.metaId];
                let userResource = new UserResource();
                userResource.id = UUIDUtil.uuid();
                userResource.userId = _this.userId;
                userResource.lessonId = _this.lessonId;
                userResource.downloadStatus = "2";//未下载
                userResource.resourceClassify = "1";
                userResource.resourceType = _this.$CONST.global.resourceSwitch[item.res_type];
                userResource.resourceId = item.meta_id;
                userResource.resourceName = bsrResources.meta_info.name
                userResource.resourceDescription = JSON.stringify(bsrResources);
                userResource.isDefault = "0";
                console.log('cloud  userResource',userResource);
                SqlLibBook.updateOrInsertExtraResource(SqlLib.getInstance(window.$DBDIR), userResource)//本地数据库记录
                usermeta.creatUserLessonMeta({//创建用户、课程、资源关系
                    lessonId: _this.lessonId,
                    metaId:item.id,
                    type: this.isDiyLesson ? 1 : 0,
                }).then(() => { }).catch(error => { });
                _this.metaId = "";
                item.isDownload = true
                let curIndex = -1;
                _this.resourceList.forEach((resource, index) => {
                    if (resource.meta_id === item.meta_id) {
                        curIndex = index;
                    }
                })
                if (curIndex != -1) {
                    _this.resourceList.splice(curIndex, 1, item);
                }
                bus.$emit('updateLessonList')
                // bus.$emit('initDiyLesson', _this.lessonId) 
            })
            return
            this.dIdx = `a${index}`;
            item.zip_url = item.zip_url ? this.$CONST.global.cdnResourcePrefix + item.zip_url : "";
            this.metaId = item.meta_id
            this.cloudDownloader = new CloudResDownloader();
            this.cloudDownloader.downloadOneResource(resource, item, function (progressVal, speed) {
                const progress = {
                    speed: speed,
                    progressVal: progressVal
                }
                item.progress = progress
                let curIndex = -1;
                _this.resourceList.forEach((resource, index) => {
                    if (resource.meta_id === item.meta_id) {
                        curIndex = index;
                    }
                })
                if (curIndex != -1) {
                    _this.resourceList.splice(curIndex, 1, item);
                }
            }, function (bsr) {
                //塞数据库
                let userResource = new UserResource();
                userResource.id = UUIDUtil.uuid();
                userResource.userId = _this.userId;
                userResource.lessonId = _this.lessonId;
                userResource.downloadStatus = "0";
                userResource.resourceClassify = "1";
                userResource.resourceType = _this.$CONST.global.resourceSwitch[item.res_type];
                userResource.resourceId = item.meta_id;
                userResource.resourceDescription = bsr;
                let tempBsr = JSON.parse(bsr);
                userResource.isDefault = "0";
                SqlLibBook.updateOrInsertExtraResource(SqlLib.getInstance(window.$DBDIR), userResource);
                //服务端插入
                console.log('bsr' + bsr);
                usermeta.creatUserLessonMeta({
                    lessonId: _this.lessonId,
                    metaId: tempBsr.meta_info.id
                }).then(() => { }).catch(error => { });

                _this.metaId = "";
                item.isDownload = true
                let curIndex = -1;
                _this.resourceList.forEach((resource, index) => {
                    if (resource.meta_id === item.meta_id) {
                        curIndex = index;
                    }
                })
                if (curIndex != -1) {
                    _this.resourceList.splice(curIndex, 1, item);
                }
                // 通知首页更新列表信息
                bus.$emit('updateLessonList')
            });
        },
        headerStyle(cell) {
            return 'font-weight: 550;color: rgba(0,0,0,0.85);background: #EBF1F7;height:48px '
        },
        handleselfResChange(val){
            this.selfResourceNum = val
            this.showSelfResource()
        },
        showSelfResource(){
            let _this = this
            resource.getAllUploadFile({
                includeCourseware:'0',
                pageNum:this.selfResourceNum,
                pageSize:this.selfResourceSize,
                type: this.isDiyLesson ? 1 : 0,
            }).then(res=>{
                if (res.code == '0') {
                    this.selfResTotal = Number(res.returnValue.total)
                    this.uploadFileData = res.returnValue.records
                    this.uploadFileData.forEach(item=>{
                        switch (item.fileType) {
                            // case '1':
                            //     item.typeName = 'PPT'
                            //     break;
                            case '2':
                                item.typeName = '文档'
                                break;
                            case '3':
                                item.typeName = '文档'
                                break;
                            case '4':
                                item.typeName = '图片'
                                break;
                            case '5':
                                item.typeName = '视频'
                                break;
                            case '6':
                                item.typeName = '音频'  
                                break;
                            default:
                                break;
                        }
                        var isInsert = false
                        
                        item.relation.forEach(item=>{
                            console.log('---------------',item.lessonId,_this.lessonId);
                            if (item.lessonId ==  _this.lessonId) {
                                isInsert = true
                                console.log('这一课插入了',isInsert);
                            }
                        })
                        item.isInsert = isInsert
                        let tempName = this.lessonId + '-' + item.displayName
                        let userResource = SqlLibBook.queryOneResourceByName(SqlLib.getInstance(window.$DBDIR), _this.userId, _this.lessonId,tempName)
                        if (userResource != null) {
                            console.log('Insert ----------------userResource',userResource);
                            if (item.fileId == userResource.reverse2) {
                                item.isInsert = true
                            }
                        }
                    })
                    console.log(this.uploadFileData);
                }
            })
        },
        // 格式化下载进度条
        format (item) {
            if (item.progress) {
                return StringUtil.format("{0}%", item.progress.progressVal);
            }
            return '0%';
        },
        //
        getSqlLib () {
            let sqlLib = SqlLib.getInstance(window.$DBDIR);
            let user = SqlLibUser.queryCurrentUser(sqlLib);
            this.userName = user.name;
            this.userId = user.id;
            this.eduLevel = user.eduLevelId
            let curVipType = user.vipType;
            curVipType = cryUtil.aesDecrypt(curVipType, user.id, true);
            curVipType = new Buffer(curVipType, 'base64').toString('utf8');
            console.log(user);
            console.log(this.$CONST.global.svip );
            console.log(curVipType);
            // if (store.state.becomeVip !== '2') {
            //     this.searchable = true
            // }
            if (curVipType !== '2') {
                console.log('vip');
                this.searchable = true
            }else{
                this.searchable = false
            }
            this.limit = !this.searchable
        },
        // 返回
        back () {
            console.log(this.lessonId);
            // return
            this.$router.push({ name: 'home', params: { lessonId: this.lessonId} })
        },
        // 个人中心
        goPerson () {
            this.$router.push('/index/person')
        },
        // 搜索资源
        search () {
            if (this.searchText == '') {
                return
            }
            this.isAIRecommend = false
            console.log("I'm search...")
            this.pageNum = 1
            this.loading = false
            this.resourceList = [] // reset
            let params = {}
            if (this.idx === -1) { // all
                params = {
                    name: this.searchText,
                    eduLevelId: this.eduLevel,
                    pageNum: 1,
                    pageSize: 12
                }
            } else {
                params = {
                    name: this.searchText,
                    eduSubjectId: this.eduSubjectId,
                    eduLevelId: this.eduLevel,
                    pageNum: 1,
                    pageSize: 12
                }
            }
            this._getAllResource(params)
            this.clickSearch = true
            this.showSimilar = false
        },
        // 获取所有科目信息
        _getAllSubjectIds () {
            console.log("I'm _getAllSubjectIds...")
            lesson.getAllSubjectIds().then(res => {
                this.categoryList = res.returnValue.filter(item => {
                    return item.eduLevelId === this.eduLevel
                })
                this.categoryList = this.categoryList.map(item => {
                    item.img = require(`../../assets/img/cloud/${item.name}.png`)
                    item.active_img = require(`../../assets/img/cloud/${item.name}_1.png`)
                    return item
                })
                // let AIrecommend = [{
                //     active_img: require('../../assets/img/cloud/智能推荐_1.png'),
                //     description: "",
                //     eduLevelId: "1207900675501076481",
                //     gmtCreate: "",
                //     gmtModify: "",
                //     img: require("../../assets/img/cloud/智能推荐.png"),
                //     name:'智能推荐',
                //     resCount: 1,
                //     type: "0",
                // }]
                // let TempcategoryList = AIrecommend.concat(this.categoryList)
                // this.categoryList = TempcategoryList
                console.log(this.categoryList);
            })
        },

        // 获取资源列表
        _getAllResource (params) {
            if (this.isAIRecommend === true) {
                return
            }
            resource.getCenterInfoByParam(params).then(res => {
                if (res.code !== '0') {
                    this.$message.error('网络异常，加载资源失败！')
                    this.$router.push({ name: 'login' })
                    localStorage.removeItem("accesstoken");
                }
                const { total, records, pages } = res.returnValue
                this.total = total
                if (params.pageNum > pages) {
                    return;
                }
                if (!this.isTagResource) {
                    this.resourceLable = '为您找到以下资源'
                }
                this.isTagResource = false
                this.resourceList = this.resourceList.concat(records);
                this.extendResourceList();
                console.log("params.pageNum", params.pageNum);
                console.log("pages", pages)
                if (params.pageNum === pages) {
                    this.loading = true
                }
            })
        },

        // 滚动加载更多
        loadMore () {
            console.log("I'm loadMore...")
            if (!this.searchable) {
                if (!this.tips) {
                    this.$message.warning("您当前暂无权限查看所有内容");
                    this.tips = true
                }
                return;
            }
            // this.loading = true
            this.pageNum += 1
            let params = {}
            if (this.idx === -1) { // all
                params = {
                    name: this.searchText,
                    eduLevelId: this.eduLevel,
                    pageNum: this.pageNum,
                    pageSize: 12
                }
                 this._getAllResource(params)
            } else {
                params = {
                    name: this.searchText,
                    eduSubjectId: this.eduSubjectId,
                    eduLevelId: this.eduLevel,
                    pageNum: this.pageNum,
                    pageSize: 12,
                }
                this._getAllResource(params)
            }
           
        },
        getRecommendSource(){
            resource.getRecommendSource({
                lessonId: this.lessonId,
                pageNum: this.pageNum,
                pageSize: 50
            }).then(res=>{
                // console.log(res);
                if (res.code === '0') {
                    this.resourceList = []
                    const { total, records, pages } = res.returnValue
                    this.resourceList = records;
                    console.log(this.resourceList);
                    this.extendResourceList();
                    this.total = total
                    this.resourceLable = total > 0 ? '该课程推荐资源' : ''
                    if (this.pageNum === pages) {
                        this.loading = true
                    }
                }
            })
        },
        // 获取分类资源列表
        getResource (index, item) {
            this.isSystemResource = true
            this.clickSearch = false
            console.log(index,item);
            if (index === 'AI') {
                if (this.isAIRecommend) return
                console.log('智能推荐');
                this.idx = index
                this.resourceList = []
                this.searchText = ''
                this.pageNum = 1
                this.isAIRecommend = true
                if (this.limit === true) {
                    console.log(this.limit);
                    return
                }
                this.AI_animation = true
                setTimeout(() => {
                    if (this.isAIRecommend) {
                        var animation_box =  document.getElementById('animation_box')
                        animation_box.style.display = "none"
                        this.AI_animation = false
                    }
                }, 2200); //解决动效结束后滚轮失效问题
                this.getRecommendSource()
            }else{
                if (this.AI_animation) {
                    return
                }
                if (this.clickFast === true) {
                    this.$message.warning('请勿频繁切换')
                    return
                }
                this.clickFast = true
                setTimeout(() => {
                    this.clickFast = false
                }, 300);
                
                this.isAIRecommend = false
                this.AI_animation = false
                this.idx = index
                switch (index) {
                    case -1:
                        this.currentType = '全部资源'
                        break;
                    case 0:
                        this.currentType = '物质科学'
                        break;
                    case 1:
                        this.currentType = '生命科学'
                        break;
                    case 2:
                        this.currentType = '地球与宇宙科学'
                        break;
                    case 3:
                        this.currentType = '技术与工程'
                        break;
                    default:
                        break;
                }
                this.resourceList = [] // reset
                this.searchText = ''
                this.pageNum = 1
                this.loading = false
                let params = {}
                if (item) {
                    this.eduSubjectId = item.id
                    params = {
                        eduSubjectId: item.id,
                        eduLevelId: this.eduLevel,
                        pageNum: 1,
                        pageSize: 12
                    }
                } else {
                    params = {
                        eduLevelId: this.eduLevel,
                        pageNum: 1,
                        pageSize: 12
                    }
                }
                this._getAllResource(params)
            }
            
        },

        //extend resourceList
        extendResourceList () {
            let userRes = new UserResource();
            userRes.resourceClassify = "1";
            userRes.userId = this.userId;
            userRes.lessonId = this.lessonId;
            let resourceIds = SqlLibBook.selectDownloadedCloudRes(SqlLib.getInstance(window.$DBDIR), userRes);
            console.log("resourceIds => " + JSON.stringify(resourceIds));
            if (resourceIds && SqlLib.getInstance(window.$DBDIR).checkSqlError(resourceIds)) {
                this.resourceList.forEach(resource => {
                    resource.progress = {
                        speed: 0,
                        progressVal: 0
                    }
                    if (resourceIds.contains(resource.meta_id)) {
                        resource.isDownload = true
                    } else {
                        resource.isDownload = false;
                    }
                });
            }
        },

        vipMessage () {
            return this.searchable ? "" : "（*非VIP/SVIP用户至多可筛选24个云资源）"
        },
        queryKeyWordTags(){
            resource.queryKeyWordTags({
                appkey: "NOVO_EDU_BEAUTY_SCIENCE_PC"
            }).then(res=>{
                // console.log(res);
                if (res.code == '0') {
                    if (res.returnValue) {
                        res.returnValue.forEach((item , index)=>{
                            if (index <= 4) {
                                this.keywordTagsData.push(item)
                            }
                        })
                    }
                }
            })
        },
        searchkeyWordTag(keyWordTag){
            this.isAIRecommend = false
            this.searchText = keyWordTag
            this.isTagResource= true
            this.resourceLable = keyWordTag + '相关资源'
            this.search()
        },
    }
}
</script>

<style lang="scss" scoped>
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    opacity: 0;
    background: transparent !important;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent !important;
}
.cloud-resource {
    padding: 0px 0 20px 0px;
    box-sizing: border-box;
    overflow: hidden;
    .selfReource{
        width: 100%;
        height: 100%;
        padding: 20px 30px;
        .back {
            color: #fff!important;
            position: absolute;
            right: 30px;
            cursor: pointer;
            width: 88px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0085FF;
            border-radius: 4px;
            border: 1px solid #D7D7D7;
            img{
                width: 8px;
                height: 11px;
                margin-right: 6px;
            }
        }
        .spaceSize{
            width: 100%;
            font-weight: bold;
            margin: 30px 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .spaceManage{
            white-space: nowrap;
            position: absolute;
            right: 30px;
            color: #303133;
            img{
                width: 20px;
                height: 20px;
                margin-right: 3px;
            }
        }
        .inSert{
            color: #909399 !important;;
        }
    }
    .activeResource{
        color: #4893ff;
    }
    .user-item {
        flex: 1;
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
            }
        }
        .name {
            margin: 0 8px;
        }
        .member-level {
            img {
                width: 35px;
                height: 16px;
            }
        }
        .message {
            margin-left: 16px;
            margin-top: 2px;
            position: relative;
            .message-tips {
                position: absolute;
                width: 14px;
                height: 14px;
                top: 0;
                right: 0;
                transform: translate(50%, -40%);
            }
            img {
                width: 1.389vw;
                height: 1.25vw;
            }
        }
    }
    .container {  
        
        display: flex;
        .left-category {
            background: #F4F9FF;
            position: relative;
            width: 280px;
            .item {
                width: 280px;
                height: 40px;
                line-height: 40px;
                display: flex;
                align-items: center;
                margin: 20px 0;
                padding-left: 31px;
                cursor: pointer;
                img {
                    width: 40px;
                    height: 40px;
                    margin-right: 12px;
                }
                span {
                    cursor: pointer;
                    font-size: 18px;
                    color: #303133;
                }
                &.current {
                    background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);
                    box-shadow: 0px 3px 8px 0px rgba(63, 185, 255, 0.43);
                    span {
                        color: #fff;
                    }
                }
            }
        }
        .right-category{
            width: 100%;
            height:calc(100vh - 64px);
            background: #FFFFFF;
            box-shadow: 0px -8px 8px 0px rgba(19,118,209,0.15);
            border-radius: 12px 0px 0px 0px;
            position: relative;
            .spaceFile{
                width: calc(100vw - 340px);
            }
        }
        .nolimit{
            width: calc(100% - 60px);
            margin:0 30px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1.25vw;
            color: #4D4D4D;
            position: absolute;
            top: calc(50% - 8.8vw);
            left: calc(50% - 12vw);;
            img{
                margin-bottom: 1.39vw;
                width: 25.442vw;
                height: 15.625vw;
            }
            .nolimit_tips{
                text-align: center;
                width: 25.442vw;
            }
        }
        .notVip{
            display: none;
        }
        .cloud-handle{
            padding: 15px 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            position: relative;
            .currentType{
                font-weight: bold;
                color: #000000;
                width: 145px;
            }
            .similar{
                position: absolute;
                left: 0;
                background-color: #fff;
                z-index: 9999;
                width: 360px;
                height: auto;
                max-height: 350px;
                padding: 10px 30px;
                overflow: hidden;
                box-sizing: border-box;
                transform: translateY(-1px);
                border-radius: 0 0 4px 4px;
                border: 1px solid #0085FF;
                border-top: none;
                
                .singleWord{
                    height: 33px;
                    // line-height: 33px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    div{
                        cursor:pointer;
                    }
                }
                .singleWord:hover{
                    color: #0085FF;
                }
            }
            .search_btn{
                width: 72px;
                height: 40px;
                line-height: 40px;
                background: #0085FF;
                border-radius: 0px 4px 4px 0px;
                cursor: pointer;
                position: absolute;
                color: #FFFFFF;
                outline: none;
                border: none;
                top: 0;
                right: 0;
            }
            .back {
                cursor: pointer;
                width: 88px;
                height: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #0085FF;
                color: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #D7D7D7;
                img{
                    width: 8px;
                    height: 11px;
                    margin-right: 6px;
                }
            }
        }
        .keywordTags{
            height: 40px;
            line-height: 40px;
            background: #EBF1F7;
            border-radius: 4px;
            margin: 0px 30px 20px;
            padding: 0 0px 0 14px ;
            .tagText:hover {
                color: #0085FF;
            }
            .separator {
                display: inline-block;
                width: 1px;
                height: 14px;
                background-color: rgba(209, 219, 226, 1);
                margin: 0  24px 0 16px;
            }
            .AI_btn{
                width: 157px;
                height: 40px;
                position: absolute;
                text-align: right;
                padding-right: 12px;
                right: 0px;
                top: 0px;
                background-image: url("../../assets/img/cloud/AI_btn.png");
                background-size: cover;
                background-repeat: no-repeat;
                img{
                    width: 20px;
                    height: 20px;
                    transform: translateY(-10px);
                }
            }
        }
        .right-content {
            height: 100%;
            overflow: hidden;
            border-radius: 8px;
            padding: 0px 30px;
            .animation_box{
                opacity: 1;
                // background-image: url("../../assets/img/cloud/recommend_bg.png");
                // background-size: cover;
                // background-repeat: no-repeat;
                border: none;
                animation: noshow 2.2s linear 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                position: absolute;
                top: calc(50% - 8.35vw);
                left: calc(50% - 8.35vw);
                .video{
                    width:16.7vw;
                    height:16.7vw;
                }
                .text{
                    text-align: center;
                    font-size: 20px;
                    color: #303133;
                    font-weight: bold;
                }
            }
            .animation_res{
                opacity: 1;
                z-index: 999 !important;
                animation: show 2.2s linear 1;
            }
            .title {
                margin-bottom: 26px;
                display: inline-block;
                color: #303133;
                .mark {
                    font-size: 14px;
                    color: #eaa33a;
                }
            }
            ul {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(3, minmax(347px, 240px));
                grid-gap: 30px 30px;
                justify-content: center;
            }
            .empty {
                text-align: center;
                position: absolute;
                top: calc(50% - 15vw);
                left: calc(50% - 11.11vw);
                img {
                    width: 22.22vw;
                    height: 22.22vw;
                    margin-bottom: 1vw;
                }
                .animation_empty{
                    animation: show 2.5s linear 1;
                }
                .nores_tips{
                    font-size:18px;
                    color: #303133;
                    font-weight: bold;
                }
            }
            .scroll-container {
                height: 80vh;
                overflow: auto;
                height: calc(100vh - 240px);
            }
            .item {
                // flex: 0 0 30%;
                width: 347px;
                height: 240px;
                flex-direction: column;
                display: flex;
                justify-content: space-between;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                img {
                    width: 100%;
                    max-height: 195px;
                    border-radius: 4px 4px 0px 0px;
                }
                .content {
                    height: 45px;
                    background: #EEEEEE;
                    position: relative;
                    padding: 0 20px;
                    border-radius: 0px 0px 4px 4px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .separator {
                        display: inline-block;
                        width: 1px;
                        height: 14px;
                        background-color: rgba(209, 219, 226, 1);
                        margin: 0  11px;
                    }
                    .name {
                        max-width: 144px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 18px;
                        color: #303133;
                    }
                    .category {
                        font-size: 14px;
                        color: #606266;;
                    }
                }
            }
        }
        .pagination{
            position: absolute;
            bottom: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .ms-container {
            width: 100%;
            .right-content {
                ul {
                    grid-gap: 1.38vw 1.38vw;
                    // justify-content: center;
                }
                .item {
                    img {
                        max-height: 300px;
                    }
                }
            }
        }
    }
    @keyframes noshow {
        0%{
            opacity: 0;
        }
        20%{
             opacity: 1;
        }
        95%{
            opacity: 1;
        }
        100%{
          opacity: 0;
        }
    }
    @keyframes show {
        0%{
            opacity: 0;
        }
        98%{
            opacity: 0;
        }
        100%{
          opacity: 1;
        }
    }
}
</style>
<style scope lang="scss">
.cloud-handle{
    .el-input__prefix{
        // display: none;
    }
    .clearBrs{
        .el-input__inner{
            border-radius: 4px 4px 0 0;
        }
    }
    .el-input__inner{
        width: 360px;
        font-size: 14px; 
        background: #FFFFFF;
        border: 1px solid #0085FF;
    }
    .el-input__suffix{
        right: 80px;
        // padding-right: 90px!;
    }
}
.selfReource{
    .el-progress-bar .el-progress-bar__outer {
        border-radius: 4px;
    }
    .el-progress-bar__inner {
        border-radius: 4px; // 双边圆角
        background: linear-gradient(180deg, #34EBD3 0%, #18D2A8 100%);
    }
    .el-table .el-table__cell{
        padding: 12px 0 !important;
    }
    
}
.pagination{
    .btn-prev , .btn-next{
        background-color: #fff !important;
        line-height: 30px;
        height: 30px;
        min-width: 30px;
    }
    .el-pager li{
        background-color: #fff!important;
        line-height: 30px;
        height: 30px;
        min-width: 30px;
    }
    .el-pager li.active{
        // background: none!important;
        border: 1px solid #4893ff!important;
        color: #4893ff!important;
    }
}
</style>